<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Formatting Row Data for Display</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Formatting Row Data for Display</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
/* custom styles for this example */
.dt-example {margin:1em;}

/* css to counter global site css */
.dt-example th {text-transform:none;}
.dt-example table {width:auto;}
.dt-example caption {display:table-caption;}
</style>

<div class="intro">
    <p>Custom format row data for display with string templates or custom functions.</p>
</div>

<div class="example yui3-skin-sam">
    <div id="template" class="yui3-skin-sam dt-example"></div>

<div id="function" class="yui3-skin-sam dt-example"></div>

<div id="dates" class="yui3-skin-sam dt-example"></div>

<script type="text/javascript">
YUI().use("datatype-date", "datatable-base", function (Y) {
    var colsTemplate = ["id","name", {key:"price", formatter:"${value}"}],
    dataTemplate = [
        {id:"ga-3475", name:"gadget", price:6.99},
        {id:"sp-9980", name:"sprocket", price:3.75},
        {id:"wi-0650", name:"widget", price:4.25}
    ],
    dtTemplate = new Y.DataTable.Base({columnset:colsTemplate, recordset:dataTemplate,
        caption:"Data formatting with string template"}).render("#template"),
    // o = {tbody, tr, td, classnames, rowindex, record, column, data, value}
    calculate = function(o){
        var record = o.record;
        return "$"+(record.getValue("price")-record.getValue("cost"));
    },
    colsFunction = ["id", "name", {key:"profit", formatter:calculate}],
    dataFunction = [
        {id:"ga-3475", name:"gadget", price:6.99, cost:4.99},
        {id:"sp-9980", name:"sprocket", price:3.75, cost:2.75},
        {id:"wi-0650", name:"widget", price:4.25, cost:3.25}
    ],
    dtFunction = new Y.DataTable.Base({columnset:colsFunction, recordset:dataFunction,
        caption:"Data formatting with custom function"}).render("#function"),
    // o = {tbody, tr, td, classnames, rowindex, record, column, data, value}
    formatDates = function(o){
        return Y.DataType.Date.format(o.value, {format:"%m/%d/%Y"});
    },
    colsDates = ["id", "name", {key:"date", formatter:formatDates}],
    dataDates = [
        {id:"ga-3475", name:"gadget", date:new Date(2006, 5, 1)},
        {id:"sp-9980", name:"sprocket", date:new Date(2004, 8, 16)},
        {id:"wi-0650", name:"widget", date:new Date(2005, 4, 23)}
    ],
    dtDates = new Y.DataTable.Base({columnset:colsDates, recordset:dataDates,
        caption:"Data formatting with DataType.Date"}).render("#dates");
});
</script>

</div>

<h2>Formatting Row Data for Display</h2>

<p>Data can be stored in one format but be displayed in a different format. For instance, prices can be stored as numbers but be displayed as "$2.99", and birthdays can be stored as date objects but be displayed as "12/9/2009".

<p>Simple formatting can be defined with a string template on the column definition.</p>

<pre class="code prettyprint">YUI().use(&quot;datatable-base&quot;, function(Y) {
    var cols = [&quot;id&quot;,&quot;name&quot;, {key:&quot;price&quot;, formatter:&quot;\${value}&quot;}],
    data = [
        {id:&quot;ga-3475&quot;, name:&quot;gadget&quot;, price:6.99},
        {id:&quot;sp-9980&quot;, name:&quot;sprocket&quot;, price:3.75},
        {id:&quot;wi-0650&quot;, name:&quot;widget&quot;, price:4.25}
    ],
    table = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        caption: &quot;Data formatting with string template&quot;
    }).render(&quot;#template&quot;);</pre>


<p>When a calculation is needed, define a custom function that generates markup for the data cell. The custom formatter function receives an object with the following properties: <code>{tbody, tr, td, classnames, headers, rowindex, record, column, data, value}</code>.</p>

<pre class="code prettyprint">&#x2F;&#x2F; The custom formatter function recieves an object with the properties:
&#x2F;&#x2F; {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
var calculate = function (o){
    var record = o.record;
    return &quot;$&quot;+(record.getValue(&quot;price&quot;) - record.getValue(&quot;cost&quot;));
},
cols = [&quot;id&quot;, &quot;name&quot;, {key:&quot;profit&quot;, formatter:calculate}],
data = [
    {id:&quot;ga-3475&quot;, name:&quot;gadget&quot;, price:6.99, cost:4.99},
    {id:&quot;sp-9980&quot;, name:&quot;sprocket&quot;, price:3.75, cost:2.75},
    {id:&quot;wi-0650&quot;, name:&quot;widget&quot;, price:4.25, cost:3.25}
],
dt = new Y.DataTable.Base({
    columnset: cols,
    recordset: data,
    caption: &quot;Data formatting with custom function&quot;
}).render(&quot;#function&quot;);</pre>


<p>The DataType utility can be used to help format date objects.</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-date&quot;, &quot;datatable-base&quot;, function (Y) {
    &#x2F;&#x2F; The custom formatter function recieves an object with the properties:
    &#x2F;&#x2F; {tbody, tr, td, classnames, headers, rowindex, record, column, data, value}
    var formatDates = function (o){
        return Y.DataType.Date.format(o.value, { format: &quot;%m&#x2F;%d&#x2F;%Y&quot; });
    },
    cols = [&quot;id&quot;, &quot;name&quot;, { key: &quot;date&quot;, formatter: formatDates }],
    data = [
        {id:&quot;ga-3475&quot;, name:&quot;gadget&quot;, date:new Date(2006, 5, 1)},
        {id:&quot;sp-9980&quot;, name:&quot;sprocket&quot;, date:new Date(2004, 8, 16)},
        {id:&quot;wi-0650&quot;, name:&quot;widget&quot;, date:new Date(2005, 4, 23)}
    ],
    dt = new Y.DataTable.Base({
        columnset: cols,
        recordset: data,
        caption: &quot;Data formatting with DataType.Date&quot;
    }).render(&quot;#dates&quot;);</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="This example illustrates simple DataTable use cases.">
                                        <a href="datatable-basic.html">Basic DataTable</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with JSON data from a remote webservice via DataSource.Get">
                                        <a href="datatable-dsget.html">DataTable + DataSource.Get + JSON Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable loaded with XML data from a remote webservice via DataSource.IO.">
                                        <a href="datatable-dsio.html">DataTable + DataSource.IO + XML Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Custom format data for display.">
                                        <a href="datatable-formatting.html">Formatting Row Data for Display</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with nested column headers.">
                                        <a href="datatable-nestedcols.html">Nested Column Headers</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with column sorting.">
                                        <a href="datatable-sort.html">Column Sorting</a>
                                    </li>
                                
                            
                                
                                    <li data-description="DataTable with vertical and/or horizontal scrolling rows.">
                                        <a href="datatable-scroll.html">Scrolling DataTable</a>
                                    </li>
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Shows how to instantiate multiple Panel instances, and use nested modality to interact with a Datatable.">
                                        <a href="../panel/panel-form.html">Creating a modal form</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
